<template>
  <view class="login-container">
    <view class="login-form">
      <view class="text-4xl leading-10 mb-8">{{ $t('login.Welcome_to_login') }}</view>
      <view class="item-input">
        <wd-input v-model="login.name" placeholder="请输入姓名" type="text" :no-border="true" />
      </view>
      <view class="item-input">
        <wd-input
          v-model="login.password"
          class="password-input"
          show-password
          @change="handleChange"
          placeholder="请输入密码"
          :no-border="true"
          type="text"
        />
      </view>
      <view class="mt-6 login-btn">
        <wd-button type="error" custom-class="custom-shadow" @click="handleLogin">登录</wd-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { LoginInfo } from 'src/interface/login'

defineOptions({
  name: 'Login',
})

const login = ref<LoginInfo>({
  name: '',
  password: '',
})
const handleChange = () => {}
const handleLogin = () => {
  if (login.value.name === 'admin' && login.value.password === '123456') {
    uni.reLaunch({
      url: '/pages/index/index',
    })
  }
  // / myLoginApi(login.value).then(() => {
  // 处理登录逻辑，登录成功后跳转到首页
  // uni.reLaunch({
  //   url: '/pages/index/index',
  // })
  // })
}
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: #fff;
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
}
.item-input {
  margin: 10px 10px;
  ::v-deep(.wd-input.is-no-border .wd-input__inner) {
    width: 100%;
    padding: 10px 10px;
    color: #333;
    background-color: #fff;
    border: 1px solid #bfc3c7;
    border-radius: 16px;
  }
}
.login-btn {
  // width: 100%;
  :deep(.custom-shadow) {
    ::v-deep(.wd-button.is-medium.is-round) {
      width: 300px;
    }
  }
}

// .password-input >>> input {
//   width: 100%;
//   padding: 10px;
//   color: #333;
//   background-color: #fff;
//   border: 1px solid #eb3935;
//   border-radius: 4px;
// }
</style>
